<template>
  <div>
    <el-container>
      <el-header height=250px>
        <el-card>
          <h1>快捷入口</h1>
          <div class="entrance">
            <button @click="goodsWarehousing">商品入库</button>
            <button @click="staffSet">员工基础设置</button>
            <button @click="gold">金料结存单</button>
          </div>
        </el-card>
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <div class="text">
                <h1>待办事项</h1>
                <div class="dbsx">
                  <a href="http://localhost:8080/goods_manager/goodsInbounch" style="text-decoration: underline;">2017.12.01 11:23:49 北京总部 新增 采购入库单 CGRKD2017120111234901</a>
                  <a style="color:red">待审批</a>
                </div>
                <div class="dbsx">
                  <a href="http://localhost:8080/goods_manager/goodsInbounch" style="text-decoration: underline;">2017.12.01 11:23:49 北京总部 新增 采购入库单 CGRKD2017120111234901</a>
                  <a style="color:red">待审批</a>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div class="text">
                <h1>公告消息</h1>
                <div class="dbsx">
                  <a href="javascript:;" style="text-decoration: underline;" @click="message">2017.12.27 09:19:49 这是一条测试的消息需要十五个字</a>
                  <i class="el-icon-message" style="font-size:24px;font-weight:700"></i>
                </div>
                <div class="dbsx">
                  <a href="javascript:;" style="text-decoration: underline;" @click="message">2017.12.27 09:19:49 这是一条测试的消息需要十五个字</a>
                  <i class="el-icon-message" style="font-size:24px;font-weight:700"></i>
                </div>
              </div>
              <el-dialog
              title="这是一条测试的消息需要十五个字"
              :visible.sync="dialogVisible"
              width="30%"
              center>
              <span>这条消息有一千个字，太多了，所以后面都是重复的。这条消息有一千个字，太多了，所以后面都是重复的。这条消息有一千个字，太多了，所以后面都是重复的。这条消息有一千个字，太多了，所以后面都是重复的。这条消息有一千个字，太多了，所以后面都是重复的。这条消息有一千个字，太多了，所以后面都是重复的。这条消息有一千个字，太多了，所以后面都是重复的。这条消息有一千个字，太多了，所以后面都是重复的。</span>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
              </span>
            </el-dialog>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer height=230px>
        <el-card>
          <div class="footer">
            <h1>每日数据</h1>
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="goods">
                    <div>
                      <span class="num">88</span>
                      <span>件</span>
                    </div>
                    <h4>昨日销售商品</h4>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="goods">
                    <div>
                      <span class="num">66</span>
                      <span>克</span>
                    </div>
                    <h4>昨日销售黄金</h4>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div id="goodsSell" style="width: 400px; height: 200px"></div>
                </el-col>
                <el-col :span="6">
                  <div id="goldSell" style="width: 400px; height: 200px"></div>
                </el-col>
                <el-col :span="2"></el-col>
              </el-row>
          </div>
        </el-card>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import router from '@/router';

export default {
  name:'HomeView',
  data(){
    return{
      dialogVisible:false,
      goodsSellData :{
        title: {
          text: '昨日销售商品',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '手镯' },
              { value: 735, name: '项链' },
              { value: 580, name: '戒指' },
              { value: 484, name: '宝石' },
              { value: 300, name: '珠宝' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      goldSellData :{
        title: {
          text: '昨日销售黄金',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '纯金' },
              { value: 735, name: '金镶玉' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
    }
  },
  created () {
    
  },
  mounted(){
    var goodsSell = document.getElementById('goodsSell');
    var myChart1 = echarts.init(goodsSell);
    myChart1.setOption(this.goodsSellData);
    var goldSell = document.getElementById('goldSell');
    var myChart2 = echarts.init(goldSell);
    myChart2.setOption(this.goldSellData);
  },
  methods:{
    goodsWarehousing(){
      router.push('/goods_manager/goodsInbounch')
    },
    staffSet(){
      router.push('/employee_info')
    },
    gold(){
      router.push('/goods_set_nav')
    },
    message(){
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scope>
@import '@/assets/scss/var';
  .entrance{
    margin-top: 20px;
    button{
      width: 150px;
      height: 150px;
      border-radius: 75px;
      font-size: 24px;
      font-weight: 700;
      margin-right: 15px;
      color: white;
      background-color: lightblue;
      border: none;
      box-shadow: 0 0 5px lightblue;
      &:hover{
        cursor: pointer;
      }
    }
  }
  .text{
    height: 250px;
    .dbsx{
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
    }
  }
  .footer{
    height: 100%;
    .goods{
      height: 180px;
      display: flex;
      text-align: center;
      flex-direction: column;
      justify-content: center;
      .num{
        font-size: 40px;
        color: red;
        font-weight: 900;
      }
    }
  }

</style>